<template>
	<view class="index">
		<view class="top-search">
			<uni-search-bar class="search-bar" placeholder="请输入你所需要的项目" bgColor="#fff" @confirm="search" v-model="searchValue" cancelButton="none" @clear="serchClear"></uni-search-bar>
			<text class="search-text" @click="myCoupon">我的公卫券</text>
		</view>
		<view class="tag-select">
			<text v-for="(item, index) in tagList" :key="index" class="tag-item" :class="activateTag === item.value? 'activate': ''" @click="tagClick(item)">{{ item.label }}</text>
			<text class="tag-item" :class="activateTag === '券包'? 'activate': ''" @click="tagClick('券包')">券包</text>
		</view>
		<view style="padding: 16px;">
			<scroll-view v-if="couponList.length > 0" scroll-y="true" :scroll-top="0" @scrolltolower="loadPageValidCouponSurfaces" class="content">
					<view class="content-item" v-for="(item, index) in couponList" :key="item.id" :class="index > 0? 'mt-4': ''">
						<view @click="couponDetails(item.id)" style="display: flex;">
							<image :src='item.cover'></image>
							<view class="item-content">
								<text class="title">{{item.name}}</text>
								<view class="amount">
									￥<text style="font-size: 28px;">{{item.denomination}}</text>
								</view>
								<text class="validity">有效期：{{formatDate(item.expirationTime)}}</text>
							</view>
						</view>
						<button v-if="item.stockOfCoupons > 0" class="item-btn" size="mini" type="default" @click="getCoupon(item)">立即领取</button>
						<text v-else class="finished">已领完</text>
					</view>
					<view v-if="couponFinished" class="bottom-text">到底了呢~</view>
			</scroll-view>
			<scroll-view v-if="packetCouponList.length > 0" scroll-y="true" :scroll-top="0" @scrolltolower="loadPageEnabledPackage" class="content">
			
					<view class="content-item" v-for="(item2, index2) in packetCouponList" :key="item2.id" :class="index2 > 0? 'mt-4': ''">
						<view @click="couponPacketDetails(item2.id)" style="display: flex;">
							<image :src='item2.cover'></image>
							<view class="item-content">
								<text class="title">{{item2.name}}</text>
								<view class="amount">
									￥<text style="font-size: 28px;">{{item2.denomination}}</text>
								</view>
								<text class="validity">单券数量：{{item2.couponSurfaceCount}}</text>
							</view>
						</view>
						<button v-if="item2.couponSurfaceCount > 0" class="item-btn" size="mini" type="default" @click="getPacketCoupon(item2)">立即领取</button>
						<text v-else class="finished">已领完</text>
					</view>
					<view v-if="packetCouponFinished" class="bottom-text">到底了呢~</view>
			
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue'
	import { pageValidCouponSurfaces, pageEnabledPackage, receiveCoupon, receiveCouponPackage } from '@/sheep/api/mine.js'
	import dayjs from 'dayjs'
	
	// 搜索值
	const searchValue = ref('')
	// 触发搜索
	const search = (res) => {
		reset()
		if(activateTag.value === '券包') {
			loadPageEnabledPackage()
		} else {
			loadPageValidCouponSurfaces()
		}
	}
	const tagList = ref([
		{
			label: '通用',
			value: 'COMMON'
		},
		{
			label: '孕产妇',
			value: 'MATERNAL'
		},
		{
			label: '儿童',
			value: 'CHILD'
		},
		{
			label: '老年',
			value: 'OLD_PEOPLE'
		},
		{
			label: '慢性病',
			value: 'CHRONIC_DISEASE'
		}
	])
	const activateTag = ref('COMMON')
	
	// 分页数据
	const page = ref({
		pageNo: 1,
		pageSize: 10,
		total: 0,
	})
	
	// 分页数据
	const page1 = ref({
		pageNo: 1,
		pageSize: 10,
		total: 0,
	})
	
	// 券列表数据
	const couponList = ref([])
	
	// 券包分页数据
	const packetCouponList = ref([])
	
	// 日期格式化
	const formatDate = (val) => {
		return dayjs(val).format('YYYY/MM/DD')
	}
	
	const tagClick = (val) => {
		reset()
		if(val === '券包') {
			activateTag.value = '券包'
			loadPageEnabledPackage()
		} else {
			activateTag.value = val.value
			loadPageValidCouponSurfaces()
		}
	}
	
	// 数据初始化
	const reset = () => {
		couponFinished.value = false
		packetCouponFinished.value = false
		couponList.value = []
		packetCouponList.value = []
		page.value.pageNo = 1
		page.value.total = 0
		page1.value.pageNo = 1,
		page1.value.total = 0
	}
	// 点击卡券详情触发
	const couponDetails = (id) => {
		uni.navigateTo({
			url: `/pages/mine/coupon-details?id=${id}`
		})
	}
	// 点击券包详情触发
	const couponPacketDetails = (id) => {
		uni.navigateTo({
			url:`/pages/mine/packet-coupon-details?id=${id}`
		})
	}
	// 点击我的公卫券触发
	const myCoupon = () => {
		uni.navigateTo({
			url:'/pages/mine/my-coupon'
		})
	}
	
	// 点击搜索框清除按钮触发
	const serchClear = () => {
		searchValue.value = ''
		reset()
		if(activateTag.value === '券包') {
			loadPageEnabledPackage()
		} else {
			loadPageValidCouponSurfaces()
		}
	}
	const packetCouponFinished = ref(false)
	// 获取有效券包分页
	const loadPageEnabledPackage = async() => {
		if(packetCouponFinished.value) {
			return 
		}
		try{
			const params = {
				pageNo: page.value.pageNo,
				pageSize: page.value.pageSize,
				name: searchValue.value,
			}
			const res = await pageEnabledPackage(params)
			packetCouponList.value = packetCouponList.value.concat(res.data.list)
			if(packetCouponList.value.length >= res.data.total) {
				packetCouponFinished.value = true
			}
			packetCouponList.value = res.data.list
			page.value.total = res.data.total
		}catch(e){
			console.log(e)
		}
	}
	
	const couponFinished = ref(false)
	
	// 获取有效券面分页
	const loadPageValidCouponSurfaces = async() => {
		if(couponFinished.value) {
			return 
		}
		try{
			const params = {
				pageNo: page1.value.pageNo,
				pageSize: page1.value.pageSize,
				name: searchValue.value,
				type: activateTag.value
			}
			const res = await pageValidCouponSurfaces(params)
			couponList.value = couponList.value.concat(res.data.list)
			if(couponList.value.length >= res.data.total) {
				couponFinished.value = true
			}
			page1.value.pageNo++
			page1.value.total = res.data.total
		}catch(e){
			console.log(e)
		}
	}
	
	onMounted(loadPageValidCouponSurfaces)
	
	// 点击领取单券触发
	const getCoupon = async(item) => {
		try{
			const data = {
				idNumber: '110101199001013232',
				couponSurfaceId: item.id,
			}
			const res = await receiveCoupon(data)
			if(res.data) {
				uni.showToast({
					icon: none,
					title: '领取成功',
				});
			} else {
				uni.showToast({
					icon: none,
					title: res.msg,
				});
			}
		}catch(e){
			console.log(e)
		}
	}
	
	// 点击领取券包触发
	const getPacketCoupon = async(item) => {
		try{
			const data = {
				idNumber: '420103196504042096',
				couponSurfacePackageId: item.id
			}
			const res = await receiveCouponPackage(data)
			if(res.data) {
				uni.showToast({
					icon: none,
					title: '领取成功',
				});
			} else {
				uni.showToast({
					icon: none,
					title: res.msg,
				});
			}
		}catch(e){
			console.log(e)
		}
	}
</script>

<style scoped lang="scss">
	.index {
		background-color: #F9F9F9;
		height: 100%;
		.top-search {
			padding: 4px 8px;
			display: flex;
			align-items: center;
			.search-bar {
				flex: 1;
			}
			.search-text {
				padding: 0 4px;
				font-size: 16px;
				color: #04B285;
			}
		}
		.tag-select {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 12px 0;
			.tag-item {
				flex: 1;
				text-align: center;
			}
		}
		.content {
			height: calc(100vh - 150px);
			overflow: auto;
			.content-item {
				background: #fff;
				border-radius: 8px;
				position: relative;
				image {
					border-radius: 8px 0 0 8px;
					height: 100px;
					width: 112px;
				}
				.item-content {
					padding: 8px;
					.title {
						font-size: 16px;
						color: #333333;
						font-weight: bold;
					}
					.amount {
						display: flex;
						align-items: center;
						line-height: 40px;
						color: #FD5856;
						font-weight: 500;
					}
					.validity {
						font-size: 13px;
						color: #666666;
						font-weight: 400;
					}
				}
				.item-btn {
					position: absolute;
					padding: 0 12px;
					background-color: #04B285;
					border-radius: 32px;
					color: #fff;
					bottom: 12px;
					right: 12px;
					font-size: 14px;
					line-height: 26px;
				}
				.finished {
					position: absolute;
					padding: 4px 12px;
					color: #989899;
					bottom: 12px;
					right: 12px;
					font-size: 14px;
				}
			}
			.bottom-text {
				margin-top: 36px;
				text-align: center;
				font-size: 13px;
				color: #666
			}
		}
	}
	.activate {
		color: #04B285;
		font-weight: bold;
	}
</style>